<template>
	<div class="app">
		<h1 v-text="n"/>
		<h1 v-big="n"/>
		<h1 v-beauty-big="n"/>
		<hr>
		<Person/>
	</div>
</template>

<script>
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Person},
		data() {
			return {
				n:1
			}
		},
		directives:{
			/* 
				1.big函数何时调用？ —— 有人使用v-big指令时
				2.big函数收到什么参数？ —— element（指令所在元素）、binding（本次绑定的信息，主要用value属性）
				3.big函数中的this是谁？ —— 不是vm，也是不vc，是undefined！
			*/
			big(element,{value}){
				// console.log('@')
				// console.log(element)
				// console.log(binding.value)
				element.innerText = value * 10
			},
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>

